<template>
  <div class="hello">
    <div>
      <div>
        <form action="">
          <button type="submit"  v-on:click.prevent="send">send</button> <br>
        </form>
      </div>
      <p>{{count}}</p>
      <button v-on:click="count+=1">增加</button>
      <button v-on:click="addCountHandler">增加3</button>
      <button v-on:mouseover="addCountHandlerByNumber(51)">addCountHandler</button>
      <ul>
        <li v-on:click="getName(item)" v-for="(item,index) in names" v-bind:key="index">
          {{index}}-|-{{item}}
        </li>
      </ul>
    </div>
    {{51*51}} <br>
    {{msg.split(' ').reverse().join('-')}} <br>
    HelloWorld {{msg}} <br />
    {{count}}
    {{room}}
    <p v-html="room"></p>
    <a v-bind:href="links.url">{{links.title}}</a>
    <br />
    <p data-id="100">id=100</p>
    <!-- 动态绑定|可以识别自定义属性 -->
    <p v-bind:data-id="id">id={{id}}</p>
    <br>
    {{ 10>12? '正确':'错误'}}
    <p></p>
    <div>
      <p v-if="flag">水浒</p>
    </div>
    <br>
    <template v-if="flag">
      <p>孙悟空</p>
      <p>孙悟空</p>
      <p>孙悟空</p>
      <p>孙悟空</p>
    </template>
    <template v-else>
      <p>六耳猕猴</p>
      <p>六耳猕猴</p>
      <p>六耳猕猴</p>
    </template>
    <div v-show="flag">我是v-show</div>
  </div>

</template>

<script>
  export default {
    name: 'HelloWorld',
    // 事件处理函数
    methods: {
      addCountHandler() {
        this.count += 1
      },
      addCountHandlerByNumber(nums) {
        console.log(nums)
        this.count += nums
      },
      getName(name) {
        console.log(name)
      },
      send() {
        console.log("name send")
      }
    },
    data() {
      return {
        names: ["zhangsan", "wangwu", "lisi"],
        flag: false,
        msg: 'Welcome to Your Vue.js App',
        count: 0,
        room: "<h3> 标题 </h3>",
        id: 51,
        links: {
          title: "网易",
          url: "www.zhuziym.com"
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
